<template>
  <div class="consume-record container">
    <navbar>
      消费记录
      <div slot="right">
        <DatePicker
          v-model="dateArr"
          type="daterange"
          separator=" 至 "
          :editable="false"
          style="width: 220px"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          clearable
        >
        </DatePicker>
        <Button type="primary" class="ml-10" @click="handleSearch">查询</Button>
      </div>
    </navbar>
    <div class="consume-list mt-25">
      <Table :data="list"
             :columns="columns"
             :loading="loading"
             stripe
             size="small"
             height="560px"
             :border="false">
        <template slot="money" slot-scope="{ row }" class="row">
          <span v-if="row.money < 0" class="color-red">{{row.money}}</span>
          <span v-else>{{row.money}}</span>
        </template>
      </Table>
      <div class="lists-page tc mt-20" v-if="total">
        <Page :total="total"
              :current.sync="query.pageNum"
              :page-size="query.pageSize"
              @on-change="getList"/>
      </div>
    </div>
  </div>
</template>
<script>
import {balanceBill} from "@/api/wallet";
import {mapGetters} from "vuex";
import {dateFormat} from "@/common/utils";

export default {
  name: "index",
  props: {
    value: {type: Boolean, default: false}
  },
  data() {
    return {
      loading: false,
      columns: [
        {title: '类型', key: 'title', tooltip: true},
        {title: '开始时间', key: 'startTime', tooltip: true},
        {title: '结束时间', key: 'endTime', tooltip: true},
        {title: '金额', key: 'money', slot: 'money',},
        {title: '门店', key: 'shopName', tooltip: true},
        {title: '备注', key: 'remark', tooltip: true},
      ],
      list: [],
      query: {
        pageNum: 1,
        pageSize: 20
      },
      dateArr: [],
      finish: false,
      total: 0
    }
  },
  computed: {
    ...mapGetters(['memberNumber']),
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    handleSearch() {
      this.query.pageNum = 1
      this.getList()
    },
    getList() {
      if (!this.memberNumber) return;
      this.query.memberNumber = this.memberNumber
      const query = {
        ...this.query,
        ...this.formatParamsDayRange(this.dateArr)
      }
      this.loading = true
      balanceBill(query).then(res => {
        this.list = (res.rows || []).map(item => {
          item.money = item.presentedMoney + item.availMoney
          item.remark = item.deviceNo ? item.deviceNo : item.remark
          return item
        })
        this.total = res.total
      }).finally(() => {
        this.loading = false
      })
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style  lang="scss">
.consume-record {
  padding: 26px 20px;
}
</style>
